﻿@page "/gallery/navigation"
@using MyApp.Components.Pages.gallery.Navigation

<Breadcrumbs>
    <Breadcrumb href="/gallery">
        gallery
    </Breadcrumb>
    <Breadcrumb>
        Navigation Examples
    </Breadcrumb>
</Breadcrumbs>

<ApiReference Component="Breadcrumbs">
    Breadcrumbs
</ApiReference>


<p class="mb-4 text-lg">
    Breadcrumb example:
</p>

<ExampleCode Path="/gallery/Navigation/BreadcrumbExamples.razor" IncludeBreadcrumbs=true />

<BreadcrumbExamples />


<ApiReference Component="NavList">NavList</ApiReference>

<p class="mb-4 text-lg">
    Use <code>NavList</code> for rendering a vertical navigation list with Icons:
</p>

<ExampleCode Path="/gallery/Navigation/NavListExamples.razor" />

<NavListExamples />


<ApiReference Component="PrimaryButton">Link Buttons</ApiReference>

<p class="mb-4 text-lg">
    Using <code>href</code> with Button components will style hyper links to behave like buttons:
</p>

<ExampleCode Path="/gallery/Navigation/ButtonExamples.razor" />

<ButtonExamples />

<p class="my-4 text-lg">
    That can use <code>ButtonStyle</code> to render it in different colors:
</p>

<ExampleCode Path="/gallery/Navigation/ButtonStyleExamples.razor" />

<div class="max-w-screen-md">
    <ButtonStyleExamples />
</div>

<ApiReference Component="TextLink" />

<p class="mb-4 text-lg">
    Tailwind <code>&lt;a&gt;</code> hyper links, e.g:
</p>

<ExampleCode Path="/gallery/Navigation/LinkExamples.razor" />

<LinkExamples />
